import { useEffect, useState } from "react";
import { GetSupplierOrderDetails } from "../../api/index";
import { Button, Table, Tag,Pagination,Spin } from "antd";
import { useLocation } from "react-router-dom";
import "../../css/IndexDetail.css";
import React from "react";


const SupplierDetail = () => {

    // 供应商订单详情
    const [SupplierOrders, setSupplierOrders] = useState([]);
    const location = useLocation();
    const PAGE_SIZE = 5;// 设置每页显示的数据条数
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const [spinning, setSpinning] = React.useState(false);//加载中
  
    const bindSupplierOrders = async () => {
        setSpinning(true);
        const res = await GetSupplierOrderDetails(
            {
                id: location.pathname.slice(22),
                page: currentPage,
                limit:PAGE_SIZE ,
                begin: "1750-05-22",
                end: "2024-03-05"
            }
        );
        if (res.result === 0) {
            setSpinning(false);
            setSupplierOrders(res.data.data);
            setTotal(res.data.total);
        }
    };
    useEffect(() => {
        bindSupplierOrders();
    }, [currentPage])
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };
    const SupplierOrder = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '详情号',
            dataIndex: 'id',
            width: 80,
            ellipsis: true,
        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            // ellipsis: true,
            width: 150,
            render: (val, i) => (
                <>
                    <Tag color="processing">{val}</Tag>
                </>
            )
        },
        {
            title: '商户',
            dataIndex: 'merchant',
            ellipsis: true,
            width: 100
        },
        {
            title: '商品',
            dataIndex: 'name',
            ellipsis: true,
            width: 100
        },
        {
            title: '数量',
            dataIndex: 'number',
        },
        {
            width: 90,
            title: '单价',
            dataIndex: 'price',
            // width: '200px'
            render: (val, i) => (
                <>
                    <Tag color="error">￥{val}</Tag>
                </>
            )
        },
        {
            title: '总价',
            width: 100,
            dataIndex: 'money',
            render: (val, i) => (
                <>
                    <Tag color="processing">￥{val}</Tag>
                </>
            )
        },
        {
            title: '时间',
            dataIndex: 'time',
            ellipsis: true,
            width: 100
        },
        {
            title: '发货',
            dataIndex: 'isSend',
            render: (_, record) => (
                <>
                    <Tag color={record.isSend == 0 ? "warning" : "success"} > {record.isSend == 0 ? '否' : '是'}</Tag>
                </>
            ),
        },
        {
            title: '收货',
            dataIndex: 'isReceive',
            render: (_, record) => (
                <>
                    <Tag color={record.isReceive == 0 ? "warning" : "success"} > {record.isReceive == 0 ? '否' : '是'}</Tag>
                </>
            ),
        },
        {
            title: '收货数量',
            dataIndex: 'receiveNumber',
        },
        {
            title: '收货金额',
            dataIndex: 'receiveMoney',
            render: (val, i) => (
                <>
                    <Tag color="error">{val}</Tag>
                </>
            )
        },
        {
            title: '完成',
            dataIndex: 'isComplete',
            render: (_, record) => (
                <>
                    <Tag color={record.isComplete == 0 ? "warning" : "success"} > {record.isComplete == 0 ? '否' : '是'}</Tag>
                </>
            ),
        },
        {
            title: '操作',
            dataIndex: '',
            width: 90,
            render: () => (
                <span>
                    <Button type="primary" ghost>详情</Button>
                </span>
            )
        },
    ];
    return (
        <div className="default-exam-container">
            <div className="default-container">
                <div className="default-content">
                    <div className="default-table">
                        <Table
                            columns={SupplierOrder}
                            dataSource={SupplierOrders}
                            bordered
                            pagination={false}
                        />
                    </div>
                    <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
                </div>
            </div>
            <Spin spinning={spinning} tip="Loading" fullscreen />
        </div>
    )
}

export default SupplierDetail